<template>
	<view class="flex flex-column u-p-b-20 u-m-t-30 bg-white rounded-10">
		<u-cell-item :borderBottom="false" title="明细记录" :arrow="false" hoverClass="none"></u-cell-item>
		<u-grid :col="4" :border="false">
			<u-grid-item v-for="(item,index) in list" :index="index" :key='index' @click="toBalanceDetail">
				<image :src="`/static/mine/detail-${index +1}.png`" style="width: 60rpx;height: 60rpx;" mode=""></image>
				<text class="u-p-t-10">{{item.title}}</text>
			</u-grid-item>
		</u-grid>
	</view>
</template>

<script>
	export default {
		name:"mine-record",
		props: {
			list: {
				type: Array,
				default() {
					return []
				}
			}
		},
		options: { styleIsolation: 'shared' },
		methods: {
			toBalanceDetail(index) {
				if(!this.isLogin) return this._login()
				let url = ''
				if(index == 0) url = '/pages/mine/mineBalance/balanceAcountDetail/balanceAcountDetail'
				if(index == 1) url = '/pages/mine/mineBalance/winningRecord/winningRecord'
				if(index == 2) url = '/pages/mine/mineBalance/balanceBonusDetail/balanceBonusDetail'
				if(index == 3) url = '/pages/mine/mineBalance/balanceWithdrawRecord/balanceWithdrawRecord'
				uni.navigateTo({
					url: url
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
::v-deep .u-grid-item-box {
	padding: 0 !important;
}
</style>
